<template>
  <q-page class="row gutter-md" :padding="!$q.platform.is.mobile"> 
    <!-- password -->
    <div class="col-xs-12 col-md-6">
      <q-list dense class="q-py-none" :no-border="$q.platform.is.mobile">
        <q-list-header>密码设置</q-list-header>
        <q-item>
           <q-input class="full-width" type="password" v-model="profile.password" float-label="旧密码" ref="password" />
        </q-item>
        <q-item>
           <q-input class="full-width" type="password" v-model="profile.password1" float-label="新密码" ref="password1" />
        </q-item>
        <q-item>
           <q-input class="full-width" type="password" v-model="profile.password2" float-label="确认密码" ref="password2" />
        </q-item>
        <q-item>
          <q-item-main />
          <q-item-side right>
            <q-btn color="primary" icon="mdi-content-save" label="修改密码" 
                :loading="profileLoading" @click="savePassword"/>
          </q-item-side>
        </q-item>        
        <q-list-header>其他设置</q-list-header>
        <q-item>
            <q-item-side icon="email" color="red" />
            <q-item-main>
                <q-item-tile label>邮件通知</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="profile.flag" color="red" @input="onToggleFlag" />
            </q-item-side>
        </q-item>
      </q-list>
    </div>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndexSetting',
  data () {
    return {
      profileLoading: false,
      profile: {
        code: '',
        name: '',
        password: '',
        password1: '',
        password2: '',
        flag: true
      }
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '个人设置';
    let account = this.$api.account.localAccount();
    this.profile.flag = account.flag == 0 ? false : true;
  },
  methods: {
    onToggleFlag(val) {
      let me = this;
      me.$api.account.changeEmailFlag(val, res=>{
        me.$q.notify({message: '邮件通知开关设置成功', type: 'positive'});
        me.profile.flag = val;
      });    
    },
    savePassword() {
      let me = this;
      if(me.profile.password.length==0) {
        me.$q.notify({message: '请输入原密码', type: 'negative'});
        me.$refs.password.focus();
        return;
      }
      if(me.profile.password1.length==0) {
        me.$q.notify({message: '请输入新密码', type: 'negative'});
        me.$refs.password1.focus();
        return;
      }
      if(me.profile.password1 != me.profile.password2) {
        me.$q.notify({message: '两次密码输入不一致', type: 'negative'});
        me.$refs.password2.focus();
        return;
      }
      me.profileLoading = true;
      me.$api.account.changePassword(me.profile.password, me.profile.password1, res=>{
        me.$q.notify({message: '密码修改成功', type: 'positive'});
        me.profile.password = '';
        me.profile.password1 = '';
        me.profile.password2 = '';
        me.profileLoading = false;
      });
    }
  }
}
</script>
